<template>
  <div :class="[stripContainerClass]">
    <div class="label">{{ label }}:</div>
    <div :class="[screenListClass]">
      <div v-if="templateList.length > 9" :class="[floatIconClass]" @click="isOpen = !isOpen">
        <span class="opentext"> {{ isOpenText.text }}</span>
        <i :class="['el-icon-arrow-up', isOpenText.iconName]"></i>
      </div>
      <div v-for="item in templateList" :key="item[listPropVName]" :class="isActive(item)" @click="handleClik(item)">
        {{ item[listPropSName] }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeadScreenStrip',
  props: {
    activeId: undefined,
    label: {
      type: String,
      default: '研究领域',
    },
    screenList: {
      type: Array,
      default: () => [{}],
    },
    listPropSName: {
      type: String,
      default: 'dictLabel',
    },
    listPropVName: {
      type: String,
      default: 'dictValue',
    },
  },
  computed: {
    comActiveId: {
      get () {
        return this.activeId
      },
      set (val) {
        this.$emit('update:activeId', val)
      },
    },
    templateList () {
      let tempObj = {
        dictValue: undefined,
        id: undefined,
      }
      tempObj[this.listPropSName] = '全部'

      let tempList = [tempObj]
      let resList = tempList.concat(this.screenList)
      return resList
    },
    stripContainerClass () {
      return this.isOpen ? 'strip-container-active' : 'strip-container'
    },
    floatIconClass () {
      // return this.isOpen ? 'float-icon-active' : 'float-icon'
      return 'float-icon'
    },
    screenListClass () {
      return this.isOpen ? 'list-active' : 'list'
    },
    isOpenText () {
      if (this.isOpen) {
        return { text: '收起', iconName: 'arrow-up' }
      }
      return { text: '展开', iconName: 'arrow-down' }
    },
    isActive () {
      return (item) => {
        if (
          item[this.listPropVName] == this['comActiveId'] ||
          (item['dictLabel'] === '全部' &&
            (this['comActiveId'] === '全部' ||
              this['comActiveId'] === undefined))
        ) {
          return 'activeClass'
        }
        return 'normalClass'
      }
    },
  },
  watch: {
    // activeId: {
    //   handler(v) {
    //     if (v || v === 0) {
    //       this.activeId = v
    //     }
    //   },
    //   immediate: true,
    // },
  },
  data () {
    return {
      isOpen: false,

      list: [{}],
    }
  },
  methods: {
    handleClik (item) {
      if (item[this.listPropVName] == undefined) {
        this.comActiveId = undefined
        let obj = {}
        obj[this.listPropVName] = undefined
        this.$emit('itemClick', { ...obj })
        return
      }
      let isCanSelect =
        (item[this.listPropVName] || item[this.listPropVName] == 0) &&
        item[this.listPropVName] !== this['activeId']
      if (isCanSelect) {
        this.comActiveId = item[this.listPropVName]
        this.$emit('itemClick', item)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.strip-container {
  height: 3.875rem;
}

.strip-container-active {
  height: auto;
}

.strip-container,
.strip-container-active {
  position: relative;
  display: flex;
  width: 100%;
  padding: 21px 16px;
  font-size: 14px;

  .float-icon,
  .float-icon-active {
    position: absolute;
    right: 0;
    top: 1rem;
    display: flex;
    align-items: center;
    width: 6rem;
    height: 3rem;
    padding: 20px;
    color: #409eff;
    cursor: pointer;
    transition: 200ms ease all;

    span {
      min-width: 3rem;
    }

    i {
      color: #409eff;
    }
  }

  .float-icon-active {
    top: 4rem;
  }

  .arrow-up {
    transition: 300ms ease all;
  }

  .arrow-down {
    transition: 300ms ease all;
    transform: rotate(-180deg);
  }

  .label {
    font-size: 14px;
    font-family: Source Han Sans CN, Source Han Sans CN-Bold;
    font-weight: 700;
    min-width: 5rem;
    color: #333333;
    margin-right: 0.5rem;
  }

  .list {
    margin-top: -0.375rem;
    height: 3rem;
  }

  .list-active {
    height: auto;
  }

  .list,
  .list-active {
    flex-grow: 1;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    overflow: hidden;
    transition: 100ms ease all;

    .activeClass,
    .normalClass {
      height: 2.2rem;
      line-height: 2.2rem;
      // min-width: 8rem;
      text-align: center;
      padding: 0 16px;
      margin-bottom: 0.5rem;
      font-size: 14px;

      cursor: pointer;
    }

    .activeClass {
      font-weight: bold;
      color: #409eff;
    }
  }

  .opentext {}
}
</style>
